<template>
<uni-shadow-root class="goods-category-components-c-tabbar-index"><view class="c-tabbar custom-class">
  <scroll-view v-if="tabList.length > 0" class="c-tabbar__scroll" scroll-x="true" :scroll-into-view="'id-' + currentActive">
    <view :class="'c-tabbar__inner '+(showMore && tabList.length > 4 ? 'c-tabbar__inner_more' : '')">
      <view v-for="(item,index) in (tabList)" :key="item.index" :id="'id-' + index" :class="'c-tabbar-item '+(currentActive === index ? 'active' : '')+' '+(item.disabled ? 'disabled' : '')" @click="onClick" :data-index="index">
        <view class="c-tabbar-item__text"> {{ item.name }} </view>
      </view>
    </view>
  </scroll-view>
  <c-tabbar-more v-if="showMore && tabList.length > 4" :tabList="tabList" @select="onClick"></c-tabbar-more>
  <slot></slot>
</view></uni-shadow-root>
</template>

<script>
import CTabbarMore from './c-tabbar-more/index.vue'
global['__wxVueOptions'] = {components:{'c-tabbar-more': CTabbarMore}}

global['__wxRoute'] = 'goods-category/components/c-tabbar/index'
Component({
  externalClasses: ['custom-class'],

  properties: {
    activeKey: {
      type: Number,
      value: 0,
    },
    tabList: {
      type: Array,
      value: [],
    },
    showMore: Boolean, // 是否需要下拉功能
  },
  observers: {
    activeKey(newVal) {
      if (this.properties.tabList && newVal) {
        this.setActive(newVal).catch((e) => {
          console.error(e);
        });
      }
    },
  },

  data: {
    currentActive: -1,
  },
  attached() {
    this.setActive(this.properties.activeKey).catch((e) => {
      console.error(e);
    });
  },

  methods: {
    setActive(activeKey) {
      if (
        !this.properties.tabList[activeKey] ||
        this.properties.tabList[activeKey].disabled
      ) {
        return Promise.reject('数据异常或不可操作');
      }
      return new Promise((resolve) => {
        this.setData(
          {
            currentActive: activeKey,
          },
          () => resolve(),
        );
      });
    },
    onClick(event) {
      let activeKey;
      if (event.type === 'select') {
        activeKey = event.detail;
      } else {
        activeKey = event.currentTarget.dataset.index;
      }
      this.setActive(activeKey)
        .then(() => {
          const { currentActive } = this.data;
          this.triggerEvent('change', { index: currentActive });
        })
        .catch((e) => {
          console.error(e);
        });
    },
  },
});
export default global['__wxComponents']['goods-category/components/c-tabbar/index']
</script>
<style platform="mp-weixin">
.c-tabbar {
  width: 100%;
  height: 100%;
  position: relative;
  --tabbar-height: 100rpx;
  --tabbar-fontsize: 28rpx;
  --tabbar-background-color: white;
}
.c-tabbar__inner {
  display: flex;
  flex-flow: row nowrap;
}
.c-tabbar__scroll {
  position: relative;
}
.c-tabbar__scroll::after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -1px;
  height: 1px;
  background-color: #eee;
  z-index: 1;
}
.c-tabbar__inner.c-tabbar__inner_more::after {
  content: '';
  display: block;
  width: 100rpx;
  height: 100rpx;
  flex: none;
}
.c-tabbar-item {
  flex: none;
  height: 100rpx;
  color: #282828;
  font-size: 28rpx;
  padding: 0 20rpx;
}
.c-tabbar-item.active:not(.disabled) {
  color: #0071ce;
  position: relative;
}
.c-tabbar-item.disabled {
  color: #ccc;
}
.c-tabbar-item__text {
  width: 100%;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
}
</style>